import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { DatePicker } from 'antd';
import moment from 'moment';
import { useUpdateEffect } from 'ahooks';
import './index.less';

export default (props) => {
    const { RangePicker, } = DatePicker;
    const [dates, setDates] = useState(null);
    const {
        startTime = 'statisticsDateStart',
        endTime = 'statisticsDateEnd',
        datePicketProps = {},
        defaultList,
        onChange,
        defaultValue,
    } = props;
    const disabledDate = (current) => {
        const currentDate = new Date();
        // 将当前日期设为午夜
        currentDate.setHours(23, 59, 59, 0);

        return current && current >= currentDate;
    };
    const onOpenChange = (open) => {
        if (open) {
            setDates([null, null]);
        } else {
            setDates(null);
        }
    };
    const [list, setList] = useState(defaultList ? defaultList : [
        { label: '今日', value: 'today' },
        { label: '昨日', value: 'yesterday' },
        { label: '7天', value: 'last7' },
        { label: '30天', value: 'last30' },
    ]);
    const [data, setData] = useState({
        dateType: defaultValue
    });
    useUpdateEffect(() => {
        onChange(data);
    }, [data]);
    return (
        <div className="DateComponents_box">
            {list.map((item, index) => {
                return (
                    <div
                        key={index}
                        onClick={() => {
                            if (item.value !== data.dateType) {
                                setData({
                                    dateType: item.value,
                                    [startTime]: '',
                                    [endTime]: '',
                                });
                            }
                        }}
                        className={
                            item.value === data.dateType
                                ? 'DateComponents_box_btn DateComponents_box_select'
                                : 'DateComponents_box_btn DateComponents_box_noSelect'
                        }
                    >
                        {item.label}
                    </div>
                );
            })}
            <div className="">
                <RangePicker
                    disabledDate={disabledDate}
                    onCalendarChange={(val) => setDates(val)}
                    onOpenChange={onOpenChange}
                    onChange={(e) => {
                        if (e === null) {
                            setData({
                                [startTime]: '',
                                [endTime]: '',
                            });
                        } else {
                            setData({
                                [startTime]: moment(e[0]).format('YYYY-MM-DD'),
                                [endTime]: moment(e[1]).format('YYYY-MM-DD'),
                                dateType: ""
                            });
                        }
                    }}
                    {...datePicketProps}
                ></RangePicker>
            </div>
        </div >
    );
};
